import React, { PureComponent } from "react";
import "./index.css";

export default class Parent extends PureComponent {
  state = {
    carName: "宝马",
  };
  changeCar = () => {
    this.setState({carName:"法拉利"});
  };
/*   shouldComponentUpdate(nextProps,nextState){
      console.log(this.props,this.state)
      console.log(nextProps,nextState)
      return !(this.state.carName === nextState.carName)
  } */
  render() {
    console.log("Parent --- render");
    const {carName} = this.state
    return (
      <div className="parent">
        <h3>我是Parent组件</h3>
        <span>我接到的车是：{carName}</span>
        <button onClick={this.changeCar}>一键换车</button>
        <Child carName={carName} />
      </div>
    );
  }
}

class Child extends PureComponent {
/*     shouldComponentUpdate(nextProps,nextState){
        // console.log(this.props,this.state)
        // console.log(nextProps,nextState)
        return !(this.props.carName === nextProps.carName)
    } */
  render() {
    console.log("Child --- render");
    return (
      <div className="child">
        <h3>我是Child组件</h3>
        <span>我接到的车是：{this.props.carName}</span>
      </div>
    );
  }
}
